<template>
  <div class="commodity-details">
    <div class="gbd-shopping-cart-gotobuy" @click='buyNow'>
      立即购买
    </div>
    <div class="goods-xiangqing">
      <i @click="goBack()"></i>
      <div>商品详情</div>
    </div>

    <div>
      <div class="goods-cover">
        <img :src="goodsObj.img_url" />
      </div>
      <div style="display: flex;justify-content: space-between;padding: 0px 15px">
        <span class="gbd-goods-name">{{goodsObj.name}}</span>
        <span class="gbd-goods-price"><b>RMB</b>
          <i></i>{{goodsObj.cost_price}}.00
          <s>{{goodsObj.price}}.00</s>
        </span>
      </div>
      <div class="detaile">
        <div style="color:#513724;font-size: 14px;text-align: center ">产品详情</div>
        <div style="color:rgba(0, 0, 0, 0.6);font-size: 11px;text-align: center ">INTRODUCE</div>
        <div style="    display: flex;
                justify-content: space-around;
                flex-wrap: wrap;">
          <img :src="item.img_url" width="110" height="110" v-for="(item,index) in list" :key='index' />

        </div>

        <div>
          {{goodsObj.img_desc}}
        </div>
      </div>
    </div>


  </div>

</template>
<script>
  import {
    Indicator
  } from 'mint-ui'
  export default {
    data() {
      return {
        userid: localStorage.getItem("loginMobile"),
        goodsId: '',
        goodsObj: {}, //商品详情对象
        willShow: false, //是否显示产品颜色分类选择
        standard: {
          size: '大中小',
          color: '红白黄'
        }, //商品规格颜色对象
        selectGoods: {
          size: '', //选中规格
          color: '', // 选中颜色
          num: 1, // 选中数量
        },
        showinfo: true, //选项卡切换
        // 图片分页
        sentPage: {
          "rows": "10",
          "page": 1, //图片分页累加 //rows:每页显示几条数据。page：第几页的数据
        }, //接口入参
        picParam: {}, //商品参数图片
        totalNum: 0, //总数据条数
        allLoaded: false, //分页数据是否已经加载完毕
        tabindex: 0, //当前swiper页的下标
        list: [], //详情页图片

      }
    },
    methods: {
      goBack() {
        this.$router.back();
      },
      isLogin() {
        if (!this.userid) {
          // this.$router.push({name:'login1'}) 
          this.$utils._toast('请先登录!');
          return false;
        } else {
          return true;
        }
      },
      //加入购物车
      // addShoppingCar() {	
      //     if(!this.isLogin()) {
      //         return false;
      //     }
      //     this.goodsId = this.$route.query.id;
      //     if(this.goodsObj.standard) {
      //         this.toggle(1);
      //         if(this.selectGoods.size&&this.selectGoods.color&&this.selectGoods.num) {
      //             const obj_standard = {
      //                 color:this.selectGoods.color,
      //                 size:this.selectGoods.size
      //             };
      //             const params = {
      //                 gid: this.goodsId,
      //                 standard: JSON.stringify(obj_standard),
      //                 num: this.selectGoods.num,
      //                 uid: localStorage.getItem("loginMobile"),
      //             };
      //             this.$api.post(this.$api.baseURLSchool,"dataupdate/carts/add",params,r => {
      //                 console.log(r);
      //                 if(r.data.ret == 1) {
      //                     this.$utils._toast("添加成功");
      //                     this.toggle(0);
      //                     this.selectGoods = {
      //                         size: '' , //选中规格
      //                         color: '',  // 选中颜色
      //                         num: 1,  // 选中数量
      //                     };
      //                 }
      //             },err => {
      //                 console.log(err);
      //             })
      //         } else {
      //             this.$utils._toast('请选择规格颜色');
      //         }
      //     } else {
      //         const params = {
      //             gid: this.goodsId,
      //             standard: '',
      //             num: this.selectGoods.num,
      //             uid: localStorage.getItem("loginMobile"),
      //         };
      //         this.$api.post(this.$api.baseURLSchool,"dataupdate/carts/add",params,r => {
      //             console.log(r);
      //             if(r.data.ret == 1) {
      //                 this.$utils._toast("添加成功");
      //                 // this.toggle(0);
      //                 this.selectGoods = {
      //                     size: '' , //选中规格
      //                     color: '',  // 选中颜色
      //                     num: 1,  // 选中数量
      //                 };
      //             }
      //         },err => {
      //             console.log(err);
      //         })
      //     }

      // },
      //立即购买
      buyNow() {
        if (!this.isLogin()) {
          return false;
        }
        // if (this.goodsObj.standard) {
        //     this.$utils._toast("请选择商品信息");

        //   this.toggle(1);
        //   if (this.selectGoods.size && this.selectGoods.color && this.selectGoods.num) {
        //     localStorage.setItem("selectGoods", JSON.stringify(this.selectGoods));
        //     this.$router.push({
        //       path: 'firmOrder',
        //       query: {
        //         id: this.goodsObj.id
        //       }
        //     });
        //   } else {
        //     this.$utils._toast("请选择商品信息");
        //   }
        // } else {
        localStorage.setItem("selectGoods", JSON.stringify(this.selectGoods));
        this.$router.push({
          path: 'firmOrder',
          query: {
            id: this.goodsObj.id
          }
        });
        // }



      },
      //获取商品详情
      getDetailsData() {
        this.goodsid = this.$route.query.id;
        this.$api.get(this.$api.baseURLSchool, "selectdetail/goods/" + this.goodsid, {}, r => {
          if (r.data.ret == 1) {
            this.goodsObj = r.data.info;
            if (this.goodsObj.standard) {
              this.standard = JSON.parse(this.goodsObj.standard);
            }

          }
        }, err => {
          console.log(err);
        })
      },
      //获取商品图文详情图片()
      getInfoPic(param) {
        this.goodsid = this.$route.query.id;
        this.$api.post(this.$api.baseURLSchool, "selecttype/goods_imgs/0?goods_id=" + this.goodsid + "&type=" + param,
          this.sentPage, r => {
            if (r.data.ret == 1) {
              this.list = r.data.rows;
            //   if (r.data.rows.length == 0) {
            //     this.$utils._toast("暂无更多数据");
            //   }
            } else {
              this.$utils._toast("暂无更多数据");
            }
          }, err => {
            console.log(err);
          })
      },
      //下拉刷新
      loadTop() {
        this.sentPage.page = 1;
        var that = this;
        setTimeout(() => {
          this.getDetailsData();
          if (that.tabindex == 0) {
            this.getInfoPic("info");
          } else if (that.tabindex == 1) {
            this.getInfoPic("param");
          }
        }, 20);
        this.$refs.loadmore.onTopLoaded();
      },
      //上拉加载
      loadBottom() {
        // console.log(this.tabindex);
        (this.sentPage.page) ++;
        var that = this;
        setTimeout(() => {
          if (that.tabindex == 0) {
            this.getInfoPic("info");
          } else if (that.tabindex == 1) {
            this.getInfoPic("param");
          }
        }, 20);
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
    },
    created() {
      this.getDetailsData();
      this.getInfoPic("info");
      Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });
    },
    mounted() {
      var that = this;
      // var Swiper2 = new Swiper('#swiper2', { 
      // 	onSlideChangeStart: function(swiper) {       
      // 		var index = swiper.activeIndex;  
      // 		that.tabindex =  index;                 
      // 		$('.gbd-one-area').removeClass("onthis");                 
      // 		$('.gbd-one-area').eq(index).addClass("onthis");            
      // 	}
      // });          
      $('.gbd-one-area').click(function () {
        // Swiper2.slideTo($(this).index());   
        that.tabindex = $(this).index();
        $(this).addClass('onthis').siblings().removeClass("onthis");
      });

    }
  }

</script>
<style scoped="scoped">

</style>
